<template>
    <div>
        <el-col :span="12">
            <el-menu router :default-openeds="['1']" active-text-color="#ffd04b" background-color="#545c64"
                     class="el-menu-vertical-demo" default-active="2" text-color="#fff" @open="handleOpen"
                     @close="handleClose">
                <el-sub-menu index="1">
                    <template #title>
                        <el-icon>
                            <House/>
                        </el-icon>
                        <span>首页</span>
                    </template>
                    <el-menu-item v-for="item in route_list" :key="item.name" :index="item.path">{{
                            item.meta.title
                        }}
                    </el-menu-item>
                </el-sub-menu>
            </el-menu>
        </el-col>
    </div>
</template>
<script lang="ts" setup>
import {onMounted, ref} from 'vue'
import router from '../router/router'

let route_list = ref([])

onMounted(() => {
    router.options.routes.map((item: any) => {

        if (item.path != '/') {
            if (item.name != 'login') {
                if (item.name != 'Home') {
                    route_list.value.push(item)
                }


            }
        }

    })


})
const handleOpen = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}
</script>
<style>
.el-col-12 {
    white: 70%;
    background-color: #545c64;
    height: 92.5vh;
    max-width: 100%;
}
</style>